<template>
  <div class="home">
    <!--    <img alt="Vue logo" src="../assets/logo.png">-->
    <!--    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>-->
    <a-table :columns="columns" :data-source="shop_data" class="card">
      <template slot="title">
        <a-icon type="container" /><strong style="margin-left: 10px"
          >商品类别</strong
        >
      </template>
      <a slot="name" slot-scope="text">{{ text }}</a>
      <!--      <span slot="customTitle"><a-icon type="smile-o" />商品名称</span>-->
      <span slot="tags" slot-scope="tags">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="
            tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
          "
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
      <span slot="action">
        <a-button
          style="
            background-image: linear-gradient(45deg, #f43f3b, #ec008c);
            color: #fff;
          "
        >
          详情
        </a-button>
        <a-divider type="vertical" />
        <a-button
          style="
            background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
            color: #fff;
          "
        >
          购买
        </a-button>
      </span>
    </a-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  // components: {
  //   HelloWorld,
  // },
})
export default class Home extends Vue {
  columns = [
    {
      dataIndex: 'name',
      key: 'name',
      title: '名称',
      // slots: { title: 'customTitle' },
      scopedSlots: { customRender: 'name' },
    },
    {
      title: '库存',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '描述',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '发货方式',
      key: 'tags',
      dataIndex: 'tags',
      scopedSlots: { customRender: 'tags' },
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' },
    },
  ]

  shop_data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
  ]

  created() {
    console.log('created')
    console.log(this.$route)
  }
}
</script>
<style scoped>
.card {
  background-color: white;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-shadow: 0 2px 6px grey;
}
.home {
  margin-top: 20px;
  padding-left: 15%;
  padding-right: 15%;
}
</style>
